<script setup lang="ts">
// 导入所需的Vue响应式函数
import { reactive } from 'vue';

const props: any = defineProps<{
    ujt: any;
}>();

// 动态加载组件专用的挂载方案--------001
// 先动态挂载一下组件
const imComp: any = import.meta.glob(['./_comps/*.vue'], {
    eager: false,
});
// 获取组件名
function getVueName(path: string) {
    const match = path.match(/([^\\/]+)(?=\.vue$)/);
    return match ? match[1] : null;
}
// 处理组件名与组件的键值对
for (let key in imComp) {
    imComp[getVueName(key) || key] = imComp[key];
    delete imComp[key];
}
console.log(666.123, imComp);
// 动态加载组件专用的挂载方案--------002

const rfAsaiData: any = {
    comp: imComp,
    // 语言文件可以放到固定的地方，直接解析过来，或自定义在这里
    lang: {
        obj: '测试对象',
        tty: '天通苑',
        yyy: '哈哈哈哈哈',
        uploadimg: '公共上传bin',
        uploadimg1: '上传base64',
        uploadimg2: 'binary上传',
        uploadimg3: 'base64上传',
        selectdemo: '选择demo',
        selectdemodata: { '1': '测试1', 2: '测试2', 3: '测试3' }, // select的数据 可以在原key上加data卸载这里，也可以固定到lang文件中处理
    },
    rule: {
        selectdemo: {
            type: 'number',
            comp: 'AsaiSelect',
        },
        uploadimg: { accept: 'image/*', comp: 'uploadimgbybin' },
        uploadimg1: { accept: 'image/*', comp: 'AsaiUploadImg' },
        uploadimg2: { accept: 'image/*', comp: 'asaiupbin' },
        uploadimg3: { accept: 'image/*', comp: 'asaiupbase64' },
        type: { comp: 'yyy' },
    },
    // 这是一个双向绑定的值
    data: reactive({
        uploadimg1: '',
        uploadimg2: '',
        uploadimg3: '',
        uploadimg: '1.png',
        type: 0,
        label: '这是一个标签',
        value: {
            selectdemo: 1,
            value: {
                a: 1,
                b: 'aa',
                arr: [1, 2, 3, 4, 5],
                tty: { qqq: 2222, uu: { haha: 'sss', uuu: { iu: 123 } } },
                objff: { yyy: 7777 },
            },
            a: 1,
            b: 'aa',
            arr: [1, 2, 3, 4, 5],
            tty: { qqq: 2222, uu: { haha: 'sss', uuu: { iu: 123 } } },
            obj: { yyy: 7777 },
            type: 0,
            label: '这是一个标签',
        },
        obj: { tt: 2222 },
    }),
};
</script>

<template>
    <div class="as-formtest">
        <div class="as-formtest-main">
            <AsaiForm :ujt="ujt" :asaidata="rfAsaiData"></AsaiForm>
        </div>
        <div class="as-formtest-btns">
            <button>测试按钮</button>
        </div>
        <div class="as-formtest-view">
            {{ rfAsaiData.data }}
        </div>
    </div>
</template>

<style scoped lang="scss">
.as-formtest-main {
    // 这里可以控制表单的样式
    ::v-deep(label > span) {
        display: inline-block;
        width: 120px;
        min-width: 120px;
        text-align: right;
        padding-right: 12px;
    }
    ::v-deep(label > input) {
        border-bottom: 1px solid var(--ch4);
    }
    ::v-deep(label > select) {
        border-bottom: 1px solid var(--ch4);
    }
}
.as-formtest {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    .as-formtest-main {
        flex-grow: 1;
        overflow: auto;
    }
    .as-formtest-view,
    .as-formtest-btns {
        height: auto;
    }
    .as-formtest-btns {
        background-color: var(--ch2);
        padding: var(--padding);
        > button {
            padding: 0 12px;
            background-color: var(--cm8);
            color: var(--cm0);
        }
    }
}
</style>
